<template>
  <sub-view title="用户取件" :back="back">
    <p class="msg" :class="{ 'hight-light': isSuccess }">{{msg}}</p>
  </sub-view>
</template>

<script>
import SubView from 'components/sub-view/sub-view'
import { setOrderState, getOrderDetail } from 'service/order'
export default {
  name: 'order-receive',
  data () {
    return {
      state: 4,
      msg: '',
      isSuccess: false
    }
  },
  mounted () {
    this.__getOrderDetail().then(() => {
      this.__setOrderState()
    }).catch(msg => {
      this.msg = msg
    })
  },
  methods: {
    __setOrderState () {
      setOrderState(this.order, this.state).then(() => {
        this.msg = '取件成功！'
        this.isSuccess = true
        this.$route.matched[0].instances.default.reload()
      }).catch((msg) => {
        this.msg = msg
      })
    },
    __getOrderDetail () {
      const orderId = this.$route.query.orderId
      return getOrderDetail(orderId).then((order) => {
        this.order = order
        return Promise.resolve()
      })
    },
    back () {
      this.$router.push({
        path: '/list'
      })
    }
  },
  components: {
    SubView
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~stylus/variable"
  .msg
    position: absolute
    top: 45%
    width: 100%
    text-align: center
    transform: translate3d(0, -50%, 0)
    font-size: 2rem
    color: $color-gray
    &.hight-light
      color: $color-green
</style>
